<script setup lang='ts'>
import { onMounted } from 'vue';

// 定义接受props参数
// defineProps<{
//     name: string
//     age?: number
// }>()
// Vue 3.5+的版本的用法
// const { age = 10 } = defineProps<{
//     name: string
//     age?: number
// }>()
// Vue 3.5以下的默认值的设置方式
const props = withDefaults(
    // defineProps<{ name: string, age?: number }>(),
	defineProps<{
        name: string,
        age?: number,
        func?(count: number): void
    }>(),
    {
        name: "默认值",
        age: 100
    }

)

const test = () => {
    // 这里面拿到的是最新的传递过来的数据
    console.log(props.name, props.age)
}
onMounted(() => {
    test()
})

// 自定义事件类型
// updateChange-参数1个 number类型
const emits = defineEmits<{
    // key(事件名称): value(参数类型数组)
    "updateAge": [age: number]
    "updateName": [name: string]
    "updateAll": [age: number, name: string]
}>()
// 实现子传父
const toParent = () => {
    emits("updateAge", props.age - 1)
}
const toParentName = () => {
    emits("updateName", props.name + "1")

}
</script>

<template>
    <div class="child">
        <h2>子组件显示父组件传递过来的数据</h2>
        <p>接收的姓名：{{ name }}</p>
        <p>接收的年龄：{{ age }}</p>
		<button @click="func(age - 1)">子传父-回调函数形式</button>
        <button @click="toParent">子传父-emits形式</button>
        <button @click="toParentName">子传父-改名称</button>
        <button @click="emits('updateAll', age + 1, name + '1')">子传父-改所有</button>

    </div>
</template>

<style scoped></style>